<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<th:block th:include="include :: header('文章列表')" />
<style type="text/css">
     <style>
    /*nr start*/
.test_main{width:1200px;  margin:15px auto 0;}
.nr_left{width:900px; height:100%; float:left;}

.test{ width:100%;  border:1px solid #e4e4e4; text-align:left; float:left;}
.test_title{width:900px; height:45px; line-height:45px; background-color:#f7f7f7;position:fixed; bottom:0; z-index:1000;}
.test_title p{padding:0 20px; display:block; float:left;}
.test_time{color:#f00; line-height:45px;}
.test_time i{font-size:20px; height:45px; line-height:40px; display:block; float:left}
.test_time b{font-size:16px; height:45px; display:block; float:left; margin-left:10px;}
.test_dtk {line-height:45px;}
.test_dtk i{font-size:22px; height:45px; line-height:45px; display:block; float:left; color:#389fc3;}
.test_dtk span{font-size:14px; height:45px; display:block; float:left; margin-left:10px;}
.test_title font{width:80px; height:45px;  display:block; float:right; text-align:center; }
.test_title font input{background:#389fc3; border:none; display:block; width:80px; height:45px; cursor:pointer; color:#fff; font-size:16px; font-weight:bold;}
.test_title font input:active{background:#79aef0;}

.test_content{width:100%; height:auto; margin-top:15px;}
.test_content_title{width:100%; height:50px; line-height:50px; background:#f7f7f7; text-align:center;}
.test_content_title h2{padding:0 30px; font-size:16px; font-weight:normal; display:block; float:left}
.test_content_title p{padding:0 10px; height:40px; line-height:40px; background:#389fc3; color:#fff; border-radius:30px; display:block; float:left; margin-top:5px;}

.test_content_nr{width:100%; border-top:3px solid #efefef;}
.test_content_nr>ul>li{width:100%;  border-bottom:5px solid #efefef; padding-top:10px;}
.test_content_nr_tt{width:85%; height:auto; line-height:32px; margin:0 auto; border-bottom:1px solid #e4e4e4;}
.test_content_nr_tt i{width:25px; height:25px; line-height:25px; text-align:center; display:block; float:left; background:#5d9cec; border-radius:50%; margin-left:-50px; color:#fff; margin-top:8px; font-size:16px;}
.test_content_nr_tt span{padding:0 8px;}
.test_content_nr_tt font{font-size:14px}
.test_content_nr_tt b{display:block; float:right; margin-right:-50px; color:#f48c27; font-size:20px;}

.test_content_nr_main{width:85%; margin:0 auto; padding:10px 0;height:auto;}

.option{line-height:32px; display:block; background:#fff;color:#666;}
.option:hover{background:#e4e4e4;}
.option input{width:20px; height:20px; display:block; float:left; margin:10px 10px 0 0;}
.option label{height:auto;display:block;}

.test_more_nr_main{width:85%; margin:0 auto; padding:10px 0;}
.multiple{width:100%; height:40px; line-height:40px; display:block; background:#fff; margin-bottom:3px;}
.multiple:hover{background:#e4e4e4;}
.multiple dd input{width:20px; height:20px; display:block; float:left; margin:10px 10px 0 0;}
.multiple dd label{width:725px; height:40px; display:block; float:left;}
.test_click{background:#7aaff3; }
.test_click a{color:#fff;}
/*nr_right start*/		
.nr_right{width:280px; height:100%; float:right;}
.nr_rt_main{width:100%; height:auto;}

.rt_nr1{width:280px; position:fixed; top:15px; z-index:1000;}
.rt_nr1_title{width:280px; height:45px; line-height:45px; background:#f3f3f3;}
.rt_nr1_title h1{width:130px; height:45px; background:#389fc3; text-align:center; font-size:14px; display:block; float:left; color:#fff;}
.rt_nr1_title h1 i{padding:0 5px; font-size:14px; font-weight:normal;}
.rt_nr1_title p{width:141px; height:43px;  padding-right:8px; border:1px solid #e4e4e4; border-left:0; display:block; float:right;}
.rt_nr1_title p i{margin-left:10px;}

.rt_content{width:278px; height:100%; border:1px solid #e4e4e4; border-top:0;}
.rt_content_tt{width:95%; height:40px; line-height:40px; margin:0 auto; border-bottom:1px solid #e4e4e4;}
.rt_content_tt h2{width:150px; font-size:14px; display:inline-block;}
.rt_content_tt p{width:100px; display:inline-block;}
.answerSheet ul{padding:10px; text-align:left;}
.answerSheet li{ display:inline-block;margin-bottom:5px; height:30px; width:30px; line-height:30px; text-align:center; border:1px solid #e4e4e4;}
.answerSheet li a{display:block;}
.answerSheet li:hover{color:#389fc3;border-color: #389fc3;}

.rt_more{width:278px; height:100%; border:1px solid #e4e4e4; border-top:0;}
.rt_more_tt{width:95%; height:40px; line-height:40px; margin:0 auto; border-bottom:1px solid #e4e4e4;}
.rt_more_tt h2{width:150px; font-size:14px; display:inline-block;}
.rt_more_tt p{width:100px; display:inline-block;}
.rt_more_nr ul{padding:10px; text-align:left;}
.rt_more_nr ul li{ display:inline-block; margin:5px; height:30px; width:30px; line-height:30px; text-align:center; border:1px solid #e4e4e4;}


/*nr_right end*/
/*nr end*/
    
    </style>
</style>
</head>
<body class="gray-bg">
	<div class="container-div">
		<div class="row " style="height: auto">
			<div class=" col-sm-8  col-sm-offset-2 search-collapse1">
				<h1 th:text="${post.title+'(已答题)'}" style="text-align: center"></h1>
				</br>
			</div>
		</div>
		<div class="row " style="height: auto">
			<div class="col-sm-8 col-sm-offset-2 search-collapse1 " >
			 <div class="test" id="test" style="    width: 80%;
    /* left: 25%; */
    margin: 10px 10%;">
                    <form id="panel1"  action="" method="post">
                       
                        <div class="test_content_nr">
                            <ul  th:each="shiti,idx : ${datis}">
                                <li   id="qu_${idx.index}">
                                    <div class="test_content_nr_tt">
                                        <i>[[${idx.index+1}]]</i><font>[[${shiti.timu.title}]]</font>
                                        <b class="icon iconfont"></b>
				                       <textarea th:if="${shiti.timu.type == '1'}" th:id="${'q_'+shiti.id}" rows="4"   readonly class="form-control" type="text"  required>[[${shiti.content}]]</textarea>
				                        <ul th:if="${shiti.timu.type == '0'}">
                                            <li class="option">
                                                <input type="radio" class="radioOrCheck" th:checked="${shiti.content == 'A'}" th:name="${'answer'+idx.index}"  value="A" >
                                                <label for="0_answer_1_option_1">
                                                    A.
                                                    <p class="ue" style="display: inline;">[[${shiti.timu.qa}]]</p>
                                                </label>
                                            </li>

                                            <li class="option">
                                                <input type="radio" class="radioOrCheck"  th:checked="${shiti.content == 'B'}" th:name="${'answer'+idx.index}"  value="B">
                                                <label for="0_answer_1_option_2">
                                                    B.
                                                    <p class="ue" style="display: inline;">[[${shiti.timu.qb}]]</p>
                                                </label>
                                            </li>

                                            <li class="option">
                                                <input type="radio" class="radioOrCheck" th:checked="${shiti.content == 'C'}" th:name="${'answer'+idx.index}"   value="C" >
                                                <label for="0_answer_1_option_3">
                                                    C.
                                                    <p class="ue" style="display: inline;">[[${shiti.timu.qc}]]</p>
                                                </label>
                                            </li>

                                            <li class="option">
                                                <input type="radio" class="radioOrCheck" th:checked="${shiti.content == 'D'}" th:name="${'answer'+idx.index}"  value="D">
                                                <label for="0_answer_1_option_4">
                                                    D.
                                                    <p class="ue" style="display: inline;">[[${shiti.timu.qd}]]</p>
                                                </label>
                                            </li>

                                        </ul>
                                    </div>
                                 
                                      
                                </li>
                            </ul>
                        </div>

                    </form>
                    <div id="panel2" style="font-size: 30px;display:none" >
                    测试结果：<span style="color: #ff5566;" id="score">100</span>分
                    </div>
                </div>
			</div>
		</div>
	</div>
	<th:block th:include="include :: footer" />
	<script th:inline="javascript">
	 var prefix = ctx + "system/dati"
	var timus = [[${timus}]]
	 var dajuanId= [[${post.id}]]
	$('#test_jiaojuan').click(function(){
		var answer = []
	    for(var i=0;i<timus.length;i++){
	    	var userAnswer = $('#q_'+timus[i].id).val()

	    	if(userAnswer == null || userAnswer== ''){
	    		alert('请完成问卷题目')
	    		return;
	    	}
	    	answer.push({
	    		timuId:timus[i].id,
	    		content:userAnswer,
	    		dajuanId:dajuanId
	    	})
	    	
	    	
	    }
		console.log(answer)
		$.ajax({
			url:prefix+"/add1",
			method:"POST",
			dataType:'json',
			 contentType: 'application/json',
			data:JSON.stringify(answer),
			success:function(res){
				if(res.code == 0){
					alert("提交成功！");
					$.modal.closeTab();
				}else{
					$.modal.msgError(res.msg);
				}
			}
		})
	});

	</script>
</body>
</html>